<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#search {
				width: 300px;
				text-align: center;
				border: 1px solid red;
			
			}
			#search2 {
				background-color: orange;
				width: 300px;
				text-align: center;
				border: 1px solid red;
			    position: fixed;
		       	top: 10px;
		       	display: none;
			}
			#head {
				height: 200px;
			}
			
			body {
				height: 10000px;
				width: 4000px;
			}
		</style>
		<script>
			window.onscroll = function() {
				var scrtop = document.documentElement.scrollTop || document.body.scrollTop;
				var search = document.getElementById("search");
				var searchtop = search.getBoundingClientRect().top;
				if(parseFloat(scrtop)  >= parseFloat(searchtop)+200) {
					search2.style.display = "block";
				} else{
					search2.style.display = "none";
				}
			}
		</script>
	</head>

	<body>
		<div id="head">

		</div>
		<div id="search">
			<form>
				<input type="text" />
				<input type="submit" value="search" />
			</form>
		</div>
		<div id="search2">
			<form>
				<input type="text" />
				<input type="submit" value="search" />
			</form>
		</div>
	</body>

</html>